<template>
	<div class="game_manage">
		<div class="c-flex c-a-c top">
			<el-breadcrumb separator="/">
				<el-breadcrumb-item :to="{ path: '/' }">Q币充值</el-breadcrumb-item>
				<el-breadcrumb-item>商品管理</el-breadcrumb-item>
			</el-breadcrumb>
			<div>
				<el-button type="primary" @click="goAdd">添加商品</el-button>
			</div>
		</div>
		<div class="account_lists">
			<template>
				<el-table :data="goodData" border style="width: 100%">
					<el-table-column prop="goodsNo" label="商品编号">
					</el-table-column>
					<el-table-column prop="goodsName" label="商品名称">
					</el-table-column>
					<el-table-column prop="truthAmount" label="售价（元）">
					</el-table-column>
					<el-table-column prop="truthSales" label="商品销量(个)">
					</el-table-column>
					<el-table-column prop="salesAmount" label="销售总额(元)">
					</el-table-column>
					<el-table-column prop="sort" label="商品排序">
					</el-table-column>
					<el-table-column label="状态">
						<template slot-scope="scope">
							<span class="list_stock">{{scope.row.goodsState | formatState}}</span>
						</template>
					</el-table-column>
					<el-table-column fixed="right" label="操作">
						<template slot-scope="scope">
							<div v-if="scope.row.goodsState == 'ONLINE'">
								<el-button type="text" size="small" @click="goDownload(scope.row.id,scope.row.goodsNo)">下架</el-button>
							</div>
							<div v-else-if="scope.row.goodsState == 'OFFLINE'">
								<el-button type="text" size="small" @click="goUpload(scope.row.id,scope.row.goodsNo)">上架</el-button>
								<el-button type="text" size="small" @click="goDetail(scope.row.id)">修改</el-button>
							</div>
							<div v-else>
								<el-button type="text" size="small" @click="goDetail(scope.row.id,scope.row.goodsNo)">修改</el-button>
							</div>
						</template>
					</el-table-column>
				</el-table>
			</template>
		</div>
		<div class="block Pagination">
			<el-pagination @current-change="handleCurrentChange" :current-page.sync="currentPage" layout="prev, pager, next, jumper"
			 :page-size="10" :total="total">
			</el-pagination>
		</div>
		<el-dialog title="添加商品" :visible.sync="addVisible" width="60%">
			<el-form :model="addForm" :rules="addrules" ref="addForm" label-width="100px" class="demo-ruleForm">
				<el-form-item label="商品名称" prop="goodsName">
					<el-input v-model="addForm.goodsName" placeholder="请输入名称，最多20个字"></el-input>
				</el-form-item>
				<el-form-item label="售价" prop="truthAmount">
					<el-input v-model="addForm.truthAmount" placeholder="请输入售价"></el-input>
				</el-form-item>
				<el-form-item label="商品排序" prop="sort">
					<el-input v-model="addForm.sort" placeholder="排序范围1~9，数字小的在前"></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="addVisible = false">取 消</el-button>
				<el-button type="primary" @click="submitImport()">提交</el-button>
			</span>
		</el-dialog>
		<el-dialog title="修改商品" :visible.sync="changeVisible" width="60%">
			<el-form :model="changeForm" ref="changeForm" label-width="100px">
				<el-form-item label="商品名称" prop="goodsName">
					<el-input v-model="changeForm.goodsName"></el-input>
				</el-form-item>
				<el-form-item label="售价" prop="truthAmount">
					<el-input v-model="changeForm.truthAmount"></el-input>
				</el-form-item>
				<el-form-item label="商品排序" prop="sort">
					<el-input v-model="changeForm.sort"></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="changeVisible = false">取 消</el-button>
				<el-button type="primary" @click="submitChange()">提交</el-button>
			</span>
		</el-dialog>
	</div>
</template>
<script>
	export default {
		data() {
			return {
				optionsPlat: [],
				optionsName: [],
				optionsSupplier: [],
				searchForm: {},
				goodData: [],
				currentPage: 1,
				total: 10,
				addVisible: false,
				changeVisible: false,
				addForm: {},
				changeForm: {},
				addrules: {
					goodsName: [
						{ required: true, message: '请输入商品名称', trigger: 'blur' }
					],
					truthAmount: [
						{ required: true, message: '请输入商品价格', trigger: 'blur' },
						{ max: 20, message: '最多20个字', trigger: 'blur' }
					],
					sort: [
						{ required: true, message: '请选择商品排序', trigger: 'blur' }
					],
				},
			};
		},
		mounted() {
			var _this = this;
			var params = {};
			params.pageSize = 10;
			this.getList(params);
		},

		methods: {
			getList(params) {
				this.axios
					.get("qq/goods/list", { params: params })
					.then(res => {
						var _data = res.data;
						this.goodData = _data.data.list;
						this.total = _data.data.total;
					})
					.catch(error => console.log(error));
			},
			//查询
			onSubmit() {
				var params = this.searchForm;
				params.startTime = (this.searchForm.startTime) ? (this.searchForm.startTime.getTime()) : '';
				params.endTime = (this.searchForm.endTime) ? (this.searchForm.endTime.getTime()) : '';
				this.getList(params);

			},
			//换页
			handleCurrentChange(val) {
				var params = this.searchForm;
				params.pageNum = this.currentPage = val;
				params.pageSize = 10;
				this.getList(params);
			},
			goAdd() {
				this.addVisible = true;
			},
			//上架状态要下架
			goDownload(id, number) {
				var params = {};
				params.goodsId = id;
				params.goodsState = 'OFFLINE';
				this.axios
					.get("qq/goods/line", { params: params })
					.then(res => {
						var _data = res.data;
						if (_data.code == 200) {
							var _params = {};
							this.getList(_params);
						}
					})
					.catch(error => console.log(error));
			},
			//下架状态要上架
			goUpload(id, number) {
				var params = {};
				params.goodsId = id;
				params.goodsState = 'ONLINE';
				this.axios
					.get("qq/goods/line", { params: params })
					.then(res => {
						var _data = res.data;
						if (_data.code == 200) {
							var _params = {};
							this.getList(_params);
						}
					})
					.catch(error => console.log(error));
			},
			goDetail(id) {
				this.changeVisible = true;

				this.axios
					.get("qq/goods/" + id)
					.then(res => {
						var _data = res.data;
						if (_data.code == 200) {
							this.changeForm = _data.data;
						} else {
							this.$message.error(_data.message);
						}
					})
					.catch(error => console.log(error));
			},
			submitImport() {
				var params = this.addForm;

				this.axios
					.post("qq/goods/addOrUpd", params)
					.then(res => {
						var _data = res.data;
						if (_data.code == 200) {
							this.$message({
								message: '恭喜你，添加成功！',
								type: 'success'
							});
							this.addVisible = false;
							this.changeVisible = false;
							var _params = {};
							this.getList(_params);
						} else {
							this.$message.error(_data.message);
						}

					})
					.catch(error => console.log(error));
			},
			submitChange() {
				var params = this.changeForm;

				this.axios
					.post("qq/goods/addOrUpd", params)
					.then(res => {
						var _data = res.data;
						if (_data.code == 200) {
							this.$message({
								message: '恭喜你，修改成功！',
								type: 'success'
							});
							this.changeVisible = false;
							var _params = {};
							this.getList(_params);
						} else {
							this.$message.error(_data.message);
						}

					})
					.catch(error => console.log(error));
			},
			goReset() {
				this.searchForm = {};
			},
		}
	};
</script>
<style lang="less">
	.game_manage {
		width: 100%;
		padding: 15px;

		.top {
			height: 60px;
			border-bottom: 1px solid #dcdcdc;
			margin-bottom: 20px;
			justify-content: space-between;
		}

		.account_lists {
			margin-top: 15px;

			.list_stock {
				display: inline-block;
				width: 100%;
				height: 100%;
				cursor: pointer;
			}
		}

		.el-dialog__body {
			padding: 0 20px 30px;
			margin-top: 30px;

			.storedia {
				justify-content: flex-end;
				margin: 0 50px 35px 0;

				.supplier {
					margin-right: 15px;
				}
			}
		}
	}

	.el-dialog__header {
		border-bottom: 1px solid #dcdcdc;
	}

	.el-pagination {
		text-align: right;
	}
</style>